design-patterns-nuxt/pages/details/[id].vue

<template>
  <section>
    <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
    <span class="">
      {{ film.title }}
      {{ film.overview }}
      {{ director }}
      <ul>
        <li v-for="star in film.credits.cast">
          {{ star.name }}
        </li>
      </ul>
      <ul>
        <li v-for="genre in film.genres">
          {{ genre.name }}
        </li>
      </ul>
      {{ film.vote_average }}
      {{ film.vote_count }}
    </span>
    <CommentForm :filmId="film.id" />
    <CommentList :filmId="film.id" />
  </section>
</template>

<script setup lang="ts">
const config = useRuntimeConfig()
const film = ref()
const route = useRoute()
const filmId = ref('')
const director = ref('')

filmId.value = route.params.id

if (filmId.value !== '') {
  const { data } = await useFetch(`/api/details/${filmId.value}`)
  film.value = data.value
  director.value = film.value.credits.crew.filter((member) => member.job === 'Director')
  director.value = director.value[0].name
}
</script>